<template>
	<scroll-view class="container" style="height: 100vh;" scroll-y @scroll="scroll">
		<Header>学习培训</Header>
		<view class="content">
			<view class="article" ref="article">
				<view class="title">
					{{data.title}}
				</view>
				<view class="date" v-if="data.createtime_text">
					<span>{{data.createtime_text}}</span>
				</view>
				<view v-html="data.content"></view>
				<view style="margin-top: 20px;" v-if="data.video_file">
					<video id="myVideo" :src="data.video_file" :initial-time="initial_time" :autoplay="true" controls style="width: 100%;"
						@timeupdate="timeChange"></video>
				</view>
			</view>
			<view class="status" v-if="data.type == 2">已学完</view>
			<view class="bottom">
				<view class="item" :class="{active: data.like==1}" @click="dlikecCollect(1)">
					<uni-icons type="hand-up-filled" size="30"></uni-icons>
				</view>
				<view class="item" :class="{active: data.collect==1}" @click="dlikecCollect(2)">
					<uni-icons type="star-filled" size="30"></uni-icons>
				</view>
			</view>
			<hb-comment ref="hbComment" @add="add" @del="del" :deleteTip="'确认删除？'" :cmData="commentData"
				v-if="commentData"></hb-comment>
		</view>
	</scroll-view>
</template>

<script>
	import Header from '../../components/header.vue'
	import request from '../../common/request.js'
	import {
		nextTick
	} from "vue"
	export default {
		components: {
			Header
		},
		data() {
			return {
				id: '',
				data: {},
				commentData: {
					readNumer: 0,
					commentSize: 0,
					comment: []
				},
				reqFlag: false,
				comment: {},
				videoContext: null,
				height: 0,
				speed: 0,
				video_real_time: 0,
				initial_time: 0
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		beforeUnmount(){
			this.updateSpeed()
		},
		mounted() {
			this.getDetailData()
			this.getCommentList()
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			updateSpeed() {
				request({
					url: '/study/speed',
					data: {
						course_id: this.id,
						speed: this.speed
					},
					method: 'POST'
				}).then(res => {
					
				})
			},
			scroll(e) {
				if (this.speed == 100) return false
				let scrollTop = e.detail.scrollTop
				if (scrollTop >= this.height) {
					this.speed = 100
				} else {
					let speed = (Math.round((scrollTop / this.height) * 10000)) / 100
					if(speed > this.speed) this.speed = speed
				}
			},
			onloadeddata(e){
				console.log(e)
			},
			timeChange(e) {
				if(this.speed == 100) return false
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration;
				//实时播放进度 秒数
				var currentTime = parseInt(e.detail.currentTime);
				// 设置视频初始播放位置
				if(!that.initial_time){
					that.initial_time = duration * (that.speed / 100)
					that.videoContext.seek(that.initial_time);
				}
				//当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
				} else {
					var jump_time = parseInt(that.video_real_time);
				}
				if (isReady == 1) {
					if (currentTime > jump_time && currentTime - jump_time > 3) {
						// let videoContext = wx.createVideoContext('myVideo');
						that.videoContext.seek(that.video_real_time);
						wx.showToast({
							title: '未完整看完该视频，不能快进',
							icon: 'none',
							duration: 2000
						});
					}else{
						let speed = (Math.round((currentTime / duration) * 10000)) / 100
						if(speed > that.speed) that.speed = speed
					}
				}
				that.video_real_time = currentTime; //实时播放进度
			},
			dlikecCollect(type) {
				request({
					url: '/study/dlikecCollect',
					data: {
						course_id: this.id,
						type: type
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						let msg = ''
						if (type == 1) {
							if (this.data.like == 1) {
								this.data.like = 0
								msg = '取消点赞'
							} else {
								this.data.like = 1
								msg = '点赞成功'
							}
						} else {
							if (this.data.collect == 1) {
								this.data.collect = 0
								msg = '取消收藏'
							} else {
								this.data.collect = 1
								msg = '收藏成功'
							}
						}
						uni.showToast({
							title: msg,
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			del(id){
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				request({
					url: '/study/delComment',
					data: {
						comment_id: id,
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						this.reqFlag = false;
						this.$refs.hbComment.deleteComplete(id);
						// this.getCommentList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			add(req) {
				this.comment = req
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				if (req.pId) {
					this.replayComment()
				} else {
					this.addComment()
				}
			},
			replayComment() {
				request({
					url: '/study/replycomment',
					data: {
						now_id: this.comment.pId,
						content: this.comment.content
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						this.reqFlag = false;
						this.$refs.hbComment.addComplete();
						this.getCommentList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			addComment() {
				request({
					url: '/study/onecomment',
					data: {
						course_id: this.id,
						content: this.comment.content
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						this.reqFlag = false;
						this.$refs.hbComment.addComplete();
						this.getCommentList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getCommentList() {
				request({
					url: '/study/commentList',
					data: {
						course_id: this.id
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						this.commentData.commentSize = res.data.length
						this.commentData.comment = res.data
					}
				})
			},
			getDetailData() {
				request({
					url: '/study/detail',
					data: {
						course_id: this.id
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data
						this.speed = this.data.speed || 0
						nextTick(() => {
							uni.createSelectorQuery().select(".article").boundingClientRect(rect => {
								const {
									windowHeight
								} = uni.getSystemInfoSync();
								this.height = rect.height - windowHeight + 45
							}).exec()
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status {
		text-align: center;
		background-color: #eeeeee;
		line-height: 40px;
		border-radius: 20px;
	}

	.content {
		padding: 20px;
		line-height: 30px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		line-height: 26px;
		margin-bottom: 15px;
	}

	.date {
		font-size: 14px;
		text-align: center;
		margin: 10px 0px;
	}

	.date span {
		margin: 0px 10px;
	}

	.bottom {
		/* position: sticky;
		bottom: 10px; */
		margin: 20px 0px 10px;
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			border: 1px solid #e2e2e2;
			display: inline-block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0px 15px;

			&.active {
				::v-deep .uni-icons {
					color: #ea5b6a !important;
				}
			}
		}
	}
</style>